<template>
  <div class="trois-js">
    <h1>This is an trois page</h1>
    <div class="message" v-if="message">
      {{ message }}
    </div>
    <div class="layout-container">
      <!-- <Renderer ref="renderer" resize :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05, autoRotate: true }"
        shadow>
        <Camera :position="{ y: 100, z: 100 }" />
        <Scene>
          <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true"
            :shadow-map-size="{ width: 1024, height: 1024 }" />
          <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true"
            :shadow-map-size="{ width: 1024, height: 1024 }" />
          <InstancedMesh ref="imesh" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
            <SphereGeometry :radius="5" />
            <PhongMaterial />
          </InstancedMesh>
        </Scene>
        <EffectComposer>
          <RenderPass />
          <UnrealBloomPass :strength="2" />
        </EffectComposer>
      </Renderer> -->
      <!-- <trois-exam></trois-exam> -->
      <trois-noisy></trois-noisy>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import * as THREE from 'three'
import {
  Camera,
  EffectComposer,
  InstancedMesh,
  PhongMaterial,
  Renderer,
  RenderPass,
  SphereGeometry,
  SpotLight,
  Scene,
  UnrealBloomPass
} from 'troisjs'

export default defineComponent({
  name: 'TroisJS',
  data () {
    return {
      dialogVisible: false,
      message: '',
      NUM_INSTANCES: 120
    }
  },
  components: {
    Camera,
    EffectComposer,
    InstancedMesh,
    PhongMaterial,
    Renderer,
    RenderPass,
    SphereGeometry,
    SpotLight,
    Scene,
    UnrealBloomPass
  },
  mounted () {
    if (this.$refs.imesh === undefined) return
    // init instanced mesh matrix
    const imesh = (this.$refs.imesh as any).mesh as THREE.InstancedMesh
    // const imesh = (this.$refs.imesh as ThreeJS.MeshPublicInterface).mesh
    const dummy = new THREE.Object3D()
    const { randFloat: rnd, randFloatSpread: rndFS } = THREE.MathUtils
    for (let i = 0; i < this.NUM_INSTANCES; i++) {
      dummy.position.set(rndFS(200), rndFS(200), rndFS(200))
      const scale = rnd(0.2, 1)
      dummy.scale.set(scale, scale, scale)
      dummy.updateMatrix()
      imesh.setMatrixAt(i, dummy.matrix)
    }
    imesh.instanceMatrix.needsUpdate = true
  }
})
</script>

<style scoped lang="scss">
.trois-js {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.message {
  margin: 12px 0;
}

.layout-container {
  width: 800px;
  height: 540px;
}
</style>
